import {useState,useEffect,useLayoutEffect } from 'react';
import Z from "./Z"

//函数式
const F =()=>{
    const[count,setCount] = useState(0)
    //执行函数
    const updataCount=()=>{
        setCount(count+1)
    }
    //获取更新后的状态
    useEffect (()=>{
        //此处是打印最新的一个count
        console.log(count)
    },[])//第二个参数为空数组，代表之初始化执行一次，后续的状态更新全部不执行

    //2.实现生命周期的顺序（模拟）
    useEffect(()=>{
        console.log('父组件useEffect-mounted')
        return()=>{
            console.log('父组件userEffect-unmount')
        }
    })

    //3.添加依赖->给effect钩子函数添加第二个参数（某个状态）
    useEffect(()=>{
        console.log('useEffect count更新了第一个effect',count)
    },[count])
    //4.新的钩子 useleayoutEffect优先级高于useEffect,并且layout是同步的
    useLayoutEffect(()=>{
        //初始值1
        console.log('useLayoutEffect111')
    })
    
    useLayoutEffect(()=>{
        console.log('userLayoutEffect222')
    })

    useEffect(()=>{
        console.log('useEffect第二个effect',count)
    },[count])

    return(
        <div>
            <h2>useEffect</h2>
            <pre>
                useEffect 可以传入2个参数，第一个参数为我们定义的执行函数，第2个参数是依赖关系（可选参数）若一个函数组件中定义了多个useEffect,那么他们之际执行顺序是按照在代码中定义的先后顺来执行的。
                第一个参数中的代码是鞍挂载和更新就会执行的代码；return出来的代码会在组件卸载时才会执行，依赖书组不是必须项，如果不窜每次渲染都会执行，船只的话在以来想发生该百年时函数中的代码才会执行，如果穿空数组则会在组件第一次还挂载才会执行。
            </pre>
            count:{count}
            {
                count === 0 ? <Z/> :null
            }
            <button onClick={updataCount}>更新count+1</button>
        </div>
    )
}
export default F
